<template>
    <div class="addressaa">
        <v-navbar></v-navbar>
        <div class="address_container">
            <div class="address_list" v-for="(v,i) in addressList" :key="i">
                <div class="address_list_left">
                    <div class="address_select" :class="{address_selected:v.isDefault == 0}" @click="e_editDefault(v.id)"></div>
                </div>
                <div class="address_list_right">
                    <div class="address_list_top">
                        <div class="address_username">
                            <span>收货人：</span>
                            <span v-text="v.consignee" />
                        </div>
                        <div class="address_edit">
                            <span v-text="v.phone" />
                            <div class="edit_icon" @click="e_editAddress(v.id)"></div>
                        </div>
                    </div>
                    <div class="address_list_bottom">
                        <span>收货地址：</span>
                        <span v-text="v.realName" />
                        <span class="defaultAddress" v-if="!v.isDefault">默认地址</span>
                    </div>
                </div>
            </div>

        </div>
        <Modal v-model="modal1" title="修改默认地址" @on-ok="ok" @on-cancel="cancel">
            <p>确定修改默认地址</p>
        </Modal>
    </div>
</template>

<script>
import navbar from '@c/navbar/navbar'
import Button from '@c/button/button'
import { mapState, mapMutations } from 'vuex'
import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'

export default {
	name: 'addressaa',
	data() {
		return {
			modal1: false,
			addressList: [],
			addressID: '',
			addressInfo: {},
		}
	},
	components: {
		'v-navbar': navbar,
		'v-button': Button,
	},
	computed: {
		...mapState(['wtitle', 'rback']),
	},
	methods: {
		...mapMutations(['WTITLE', 'RBACK']),
		// 获取个人收货地址
		getAddress() {
			let getData = {
				userId: localStorage.getItem('userId'),
			}
			this.$store.state.loadding = true
			tokenPost(tokenLink.address.getAddressAll, getData).then(re => {
				this.$store.state.loadding = false
				if (re.status == 0) {
					console.log(re)
					this.addressList = re.data
				}
			})
		},
		// 设置默认收货地址
		e_editDefault(i) {
			this.modal1 = true
			console.log(i)
			this.addressID = i
		},
		ok() {
			let editData = {
				userId: localStorage.getItem('userId'),
				id: this.addressID,
			}
			tokenPost(tokenLink.address.editDefault, editData).then(re => {
				if (re.status == 0) {
					this.$Message.success('默认收货地址修改成功')
					this.getAddress()
				}
			})
		},
		cancel() {
			this.$Message.success('取消修改')
		},
		// 跳转修改收货地址
		e_editAddress(i) {
			this.$router.push({
				path: 'addAddress',
				name: 'addAddress',
				params: {
					addressId: i,
				},
			})
		},
	},
	created() {
		this.WTITLE('收货地址')
		this.RBACK(true)
	},
	mounted() {
		this.getAddress()
	},
}
</script>
